<template>
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="广告点击/展示详情" name="adv_info">
          <div class="filter-container">
            <el-date-picker
              v-model="listQuery.date"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              placeholder="选择日期">
            </el-date-picker>

            <el-select
              v-model="listQuery.pkg"
              style="width: 100px"
              class="filter-item"
              placeholder="请选择包"
            >
              <el-option label="全部包" :value="''" />
              <el-option v-for="(v, k) in pkgs" :key="k" :label="v" :value="k" />
            </el-select>

            <el-select
              v-model="listQuery.brand"
              style="width: 120px"
              class="filter-item"
              placeholder="请选择厂商"
            >
              <el-option label="全部厂商" :value="''" />
              <el-option v-for="(v, k) in brand1" :key="k" :label="v" :value="k" />
            </el-select>

            <el-select
              v-model="listQuery.tg"
              style="width: 140px"
              class="filter-item"
              placeholder="请选择推广渠道"
            >
              <el-option label="全部推广渠道" :value="''" />
              <el-option v-for="(v, k) in tg_option" :key="k" :label="v" :value="k" />
            </el-select>

            <el-select
              v-model="listQuery.type"
              style="width: 120px"
              class="filter-item"
            >
              <el-option label="全部类型" :value="''" />
              <el-option label="点击" value="1" />
              <el-option label="展示" value="0" />
              <el-option label="渲染" value="2" />
            </el-select>
            
            <el-select
              v-model="listQuery.adv_space"
              style="width: 120px"
              class="filter-item"
            >
              <el-option label="全部广告位" value="" />
              <el-option v-for="(v, k) in adv_space" :key="k" :label="v" :value="k" />
            </el-select>

            <el-input
              v-model="listQuery.template_id"
              placeholder="请输入模板id"
              style="width: 120px;"
              class="filter-item"
            />

            <el-input
              v-model="listQuery.advert_id"
              placeholder="请输入广告id"
              style="width: 120px;"
              class="filter-item"
            />
            <el-input
              v-model="listQuery.username"
              placeholder="请输入渠道名称"
              style="width: 120px;"
              class="filter-item"
            />

            <el-input
              v-model="listQuery.oaid"
              placeholder="请输入oaid"
              style="width: 120px;"
              class="filter-item"
            />

            <el-button
            plain size="small"
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >搜索</el-button>

            <el-button
            plain size="small"
              v-waves
              class="filter-item btn"
              type="primary"
              icon="el-icon-refresh"
              @click="handleCancel"
            >重置</el-button>
          </div>

          <div>
            <span>总数量： {{total}}</span>
          </div>
      
          <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="手机唯一id" min-width="100" align="center">
              <template slot-scope="{row}">
                <span>{{ row.oaid }}</span>
              </template>
            </el-table-column>
            <el-table-column label="媒体id" min-width="100" align="center">
              <template slot-scope="{row}">
                <span>{{ row.ad_id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="包" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ pkgs[row.pkg]}}</span>
              </template>
            </el-table-column>
            <el-table-column label="厂商" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.brand }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="渠道名称" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ row.username }}</span>
              </template>
            </el-table-column>
            
            <!-- <el-table-column label="推广渠道" min-width="" align="center">
              <template slot-scope="{row}">
                <span>
                  <el-popover
                    placement="bottom"
                    width="400"
                    trigger="click"
                    :content="row.tg">
                    <el-button slot="reference">错误详情</el-button>
                  </el-popover>
                </span> 
              </template>
            </el-table-column> -->
            <el-table-column label="推广渠道" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.tg }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="点击/展示" min-width="" align="center">
              <template slot-scope="{row}">
                <span>
                  <el-button v-if="row.type == '1'" type="primary" size="mini" round>点击</el-button>
                  <el-button v-else-if="row.type == '2'" type="info" size="mini" round>渲染</el-button>
                  <el-button v-else size="mini" round>展示</el-button>
                </span> 
              </template>
            </el-table-column>
            <el-table-column label="广告位" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ adv_space[row.adv_space] }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="模板id" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.template_id }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="广告id" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.advert_id }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="广告类型" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ adv_type[row.advert_type] || '--' }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="ecpm" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.ecpm}}</span> 
              </template>
            </el-table-column>
            <el-table-column label="快应用版本" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.version }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="框架版本" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.quick_frame }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="来源" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.source }}</span> 
              </template>
            </el-table-column>
            <!-- <el-table-column label="app时间" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.app_time }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="创建时间" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.create_time }}</span>
              </template>
            </el-table-column>

          </el-table>
      
          <pagination
            v-show="total > 0"
            :total="total"
            class="pageShow"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />

        </el-tab-pane>
        <el-tab-pane label="每个用户点击广告数量统计" name="adv_clic_user">

          <div class="filter-container">
            <el-date-picker
              v-model="listQuery2.date"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              placeholder="选择日期">
            </el-date-picker>

            <el-select
              v-model="listQuery2.pkg"
              style="width: 100px"
              class="filter-item"
              placeholder="请选择包"
            >
              <el-option label="全部包" :value="''" />
              <el-option v-for="(v, k) in pkgs" :key="k" :label="v" :value="k" />
            </el-select>

            <el-select
              v-model="listQuery2.brand"
              style="width: 120px"
              class="filter-item"
              placeholder="请选择厂商"
            >
              <el-option label="全部厂商" :value="''" />
              <el-option v-for="(v, k) in brand1" :key="k" :label="v" :value="k" />
            </el-select>
  
            <el-button
            plain size="small"
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter2"
            >搜索</el-button>

            <!-- <el-button
            plain size="small"
              v-waves
              class="filter-item btn"
              type="primary"
              icon="el-icon-refresh"
              @click="handleCancel2"
            >重置</el-button> -->
          </div>

          <el-table
            v-loading="listLoading"
            :data="user_click_list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="手机唯一id" min-width="100" align="center">
              <template slot-scope="{row}">
                <span>{{ row.oaid }}</span>
              </template>
            </el-table-column>
            <el-table-column label="点击数量" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.click_sum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="回调展示数量" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.show_sum }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="上传展示数量" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.yulan_sum }}</span> 
              </template>
            </el-table-column>

          </el-table>
      
          <pagination
            v-show="user_click_total > 0"
            :total="user_click_total"
            class="pageShow"
            :page.sync="listQuery2.page"
            :limit.sync="listQuery2.limit"
            @pagination="getUserClick"
          />


        </el-tab-pane>
        <el-tab-pane label="用户没展示和点击广告列表" name="no_clic_user">

          <div class="filter-container">
            <el-date-picker
              v-model="listQuery3.date"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              placeholder="选择日期">
            </el-date-picker>

            <el-select
              v-model="listQuery3.pkg"
              style="width: 100px"
              class="filter-item"
              placeholder="请选择包"
            >
              <el-option label="全部包" :value="''" />
              <el-option v-for="(v, k) in pkgs" :key="k" :label="v" :value="k" />
            </el-select>

            <el-select
              v-model="listQuery3.brand"
              style="width: 120px"
              class="filter-item"
              placeholder="请选择厂商"
            >
              <el-option label="全部厂商" :value="''" />
              <el-option v-for="(v, k) in brand1" :key="k" :label="v" :value="k" />
            </el-select>
  
            <el-button
            plain size="small"
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter3"
            >搜索</el-button>
          </div>

          <el-table
            v-loading="listLoading"
            :data="no_user_click_list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="手机唯一id" min-width="100" align="center">
              <template slot-scope="{row}">
                <span>{{ row.oaid }}</span>
              </template>
            </el-table-column>
          </el-table>
      
          <pagination
            v-show="no_user_click_total > 0"
            :total="no_user_click_total"
            class="pageShow"
            :page.sync="listQuery3.page"
            :limit.sync="listQuery3.limit"
            @pagination="getNoUserClick"
          />

        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
  import {
    advInfo,
    getPkgList,
    advUserClickSum,
    advNoUserClickSum
  } from "@/api/adv_admin/config";
  import {
  getLangingPage,
} from "@/api/admin/admin";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { Message } from "element-ui";
import { brand1, adv_space, adv_type } from '@/utils/index.js'
  export default {
    name: "Control",
    components: { Pagination },
    directives: { waves },
    data() {
      return {
        activeName: 'adv_info',
        brand1,
        adv_space,
        adv_type,
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20,
          pkg: "",
          brand: "",
          username: "",
          tg: "",
          type: "",
          adv_space: "",
          template_id: "",
          advert_id: "",
          date: '',
          oaid: ''
        },
        error_type: {},
        pkgs: {},
        tg_option: {},
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        // 每个用户点击广告数据统计
        listQuery2: {
          page: 1,
          limit: 20,
          pkg: "",
          brand: "",
          date: ''
    
        },
        user_click_list: [],
        user_click_total: 0,
        // 未展示和点击广告的用户
        listQuery3: {
          page: 1,
          limit: 20,
          pkg: "",
          brand: "",
          date: ''
        },
        no_user_click_list: [],
        no_user_click_total: 0
      };
    },
    created() {
      this.getLangingPages()
      this.getPkgs()
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.setDialogWidth();
        })();
      };
    },
    methods: {
      setDialogWidth() {
        const val = document.body.clientWidth;
        const def = 600; // 默认宽度
        if (val < def) {
          this.dialogWidth = "100%";
        } else {
          this.dialogWidth = def + "px";
        }
      },
      getPkgs(){
        getPkgList().then((res)=>{
          this.pkgs = res.DATA.list
        })
      },
      getList() {
        this.listLoading = true;
        advInfo(this.listQuery).then((response) => {
          this.list = response.DATA.list;
          this.total = response.DATA.total;
          this.listLoading = false;
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      getLangingPages(){
        getLangingPage({'tg': '1'}).then(res => {
          if (res.STATUS == 200){
            this.tg_option = res.DATA.tg
          }
        })
      },
      handleCancel(){
        this.listQuery = {
          page: 1,
          limit: 20,
          pkg: "",
          brand: "",
          username: "",
          tg: "",
          type: "",
          adv_space: "",
          template_id: "",
          advert_id: "",
          time: '',
          oaid: ''
        }
        this.getList()
      },
      // 每个用户点击广告数量统计
      handleFilter2(){
        this.listQuery2.page = 1
        this.getUserClick()
      },
      handleCancel2(){
        this.listQuery2 = {
          page: 1,
          limit: 20,
          pkg: "",
          brand: "",
          date: ''
        }
        this.getUserClick()
      },
      getUserClick(){
        if (!this.listQuery2.date){
          Message.error('请选择日期')
          return false;
        }
        this.listLoading = true;
        advUserClickSum(this.listQuery2).then((response) => {
          this.user_click_list = response.DATA.list;
          this.user_click_total = response.DATA.total;
          this.listLoading = false;
        })
      },
      // 没展示和广告的用户
      handleFilter3(){
        this.listQuery3.page = 1
        this.getNoUserClick()
      },
      handleCancel3(){
        this.listQuery3 = {
          page: 1,
          limit: 20,
          pkg: "",
          brand: "",
          date: ''
        }
        this.getNoUserClick()
      },
      getNoUserClick(){
        if (!this.listQuery3.date){
          Message.error('请选择日期')
          return false;
        }
        this.listLoading = true;
        advNoUserClickSum(this.listQuery3).then((response) => {
          this.no_user_click_list = response.DATA.list;
          this.no_user_click_total = response.DATA.total;
          this.listLoading = false;
        })
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 16px;
    color: #ccc;
    cursor: pointer;
    user-select: none;
  }
  .push {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
  }
  .pageHidden {
    display: none;
  }
  .btn {
    margin-left: 0;
  }
  .fullwidth {
    width: 450px;
    margin-left: 50px;
  }
  @media (max-width: 550px) {
    .pageShow {
      display: none;
    }
    .pageHidden {
      display: block;
    }
    .fullwidth {
      width: 100%;
      margin-left: 0;
    }
  }
  </style>
  